<template>
	<div class="easyd-weixin-Box">

		<div class="app_page_box" style="bottom: 50px;">
			<div class="app_page">
				<div class="app_list_box MARGIN_BOTTOM_10" v-for="item,index in serviceData">

					<div class="app_box_content">
						<div class="app_box_content_left">
							第{{times-index}}次服务
						</div>
						<div class="app_box_content_right">
							<span class="fa fa-angle-right fa-lg"></span>
						</div>
					</div>

					<div class="history_follow_info">
						<div class="app_box_flex">
							<div class="app_box_flex_1 C4">
								跟进方式：
							</div>
							<div class="app_box_flex_2" v-if="item.cs_way>0">
								电话
							</div>
							<div class="app_box_flex_2" v-else>
								上门
							</div>
						</div>
						<div class="app_box_flex">
							<div class="app_box_flex_1 C4">
								沟通结果：
							</div>
							<div class="app_box_flex_2">
								{{item.cs_content}}
							</div>
						</div>
					</div>

					<div class="app_box_content">
						<div class="app_box_content_left">
							<span class="C4 T4">{{$common.getTimes(item.cs_create_time)}}</span>
						</div>
						<div class="app_box_content_right">
							服务人：{{item.salesmanInfo.u_nickname}}
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="app_bottom_box">
			<div class="app_bottom_box_right" @click="addServiceRecord()">
				添加服务备注
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	export default {

		data() {
			return {
				times: 0,
			};
		},
		computed: {
			...mapState({
				serviceData    : state => state.ServiceRecordModule.serviceData
			})
		},
		mounted() {
			this.initData();
		},
		methods: {

			initData() {
				this.$easyUtil.startLoading(this);
				this.$http.getHttp(
						this.$API.apiServiceRecords + "/customerId/" + this.$route.query.customerId,
						rs => {
							this.$easyUtil.endLoading(this);
							console.log(rs);
							this.$store.commit("ServiceRecordModule/updateServiceData", rs.serviceRecord);
							this.times = this.serviceData.length;
						}
				);
			},
			addServiceRecord(){
				this.$easyUtil.GO(this, '/addServiceRecord',{customerId:this.$route.query.customerId})
			}
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.history_follow_info {
		padding: 10px;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.history_follow_info .app_box_flex {
		padding-bottom: 5px;
	}
	
	.history_follow_info .app_box_flex:last-child {
		padding-bottom: 0px;
	}
</style>